const laypage = layui.laypage
var layer = layui.layer
const form = layui.form

// //todo ============================== 分页模块 ========================================

//执行一个laypage实例
function renderPage1(count) {
    laypage.render({
        elem: 'page-box1',//注意，这里的 test1 是 ID，不用加 # 号
        count: +count, //数据总数，从服务端得到
        curr: linkObj_text.page, // 当前第几页(会决定第几个按钮高亮)
        limit: linkObj_text.limit, // 每页显示的条数
        limits: [1, 2, 4, 8, 10], //下拉框每一项的结果
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 排版
        jump(obj, first) {
            // jump的触发时机
            // 1. 当分页渲染的时候，会触发该回调函数  first 为true
            // 2. 当分页切换的时候，会触发该回调函数  first 为 undefined

            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 完成切换分页数据效果 ===> 核心就是发ajax请求 
            // ! 记得修改 query对象 pagenum 、pagesize 的值
            linkObj_text.page = obj.curr
            linkObj_text.limit = obj.limit

            //首次不执行
            if (!first) {
                // if 成立,说明first的值是 undefined,是点击分页切换来触发的jump
                renderText()
            }
        }
    })
}

//执行一个laypage实例
function renderPage2(count) {
    laypage.render({
        elem: 'page-box2',//注意，这里的 test1 是 ID，不用加 # 号
        count: +count, //数据总数，从服务端得到
        curr: linkObj_img.page, // 当前第几页(会决定第几个按钮高亮)
        limit: linkObj_img.limit, // 每页显示的条数
        limits: [1, 2, 4, 8, 10], //下拉框每一项的结果
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 排版
        jump(obj, first) {
            // jump的触发时机
            // 1. 当分页渲染的时候，会触发该回调函数  first 为true
            // 2. 当分页切换的时候，会触发该回调函数  first 为 undefined

            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 完成切换分页数据效果 ===> 核心就是发ajax请求 
            // ! 记得修改 query对象 pagenum 、pagesize 的值
            linkObj_img.page = obj.curr
            linkObj_img.limit = obj.limit

            //首次不执行
            if (!first) {
                // if 成立,说明first的值是 undefined,是点击分页切换来触发的jump
                renderImg()
            }
        }
    })
}


// todo ================== 渲染数据模块 =================================

const data = localStorage.getItem('x-token')
// console.log(data)
const linkObj_text = {
    type: '1',
    page: '1',
    limit: '10',
    "x-token": data
}

const linkObj_img = {
    type: '2',
    page: '1',
    limit: '10',
    "x-token": data
}

// 渲染文字类型
function renderText() {
    axios
        .get('/ydd_link/list', {
            params: linkObj_text
        })
        .then(({ data: { data: { data, count } } }) => {
            $('#tbody_text').html(data.map((item, index) => {
                return `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.title}</td>
                        <td>${item.des}</td>
                        <td><span class="zx_title_text">文字类型</span></td>
                        <td>${item.url}</td>
                        <td>
                        <button type="button" class="layui-btn layui-btn-normal btn_edit zx_circle1" data-id=${item.id}><i
                            class="layui-icon layui-icon-edit zx_pen" style="font-size: 18px;"></i></button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete zx_circle1"data-id=${item.id}><i
                            class="layui-icon layui-icon-delete zx_bin"></i></button>
                        </td>
                    </tr>
                `
            }).join(''))
            renderPage1(count)
        })
}

// 渲染图片类型
function renderImg() {
    axios
        .get('/ydd_link/list', {
            params: linkObj_img
        })
        .then(({ data: { data: { data, count } } }) => {
            $('#tbody_img').html(data.map((item, index) => {
                return `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.des}</td>
                        <td><img src="http://124.223.14.236:8060/${item.img}" alt=""></td>
                        <td><span class="zx_title_img">图片类型</span></td>
                        <td>${item.url}</td>
                        <td>
                        <button type="button" class="layui-btn layui-btn-normal btn_edit zx_circle1" data-id=${item.id}><i
                            class="layui-icon layui-icon-edit zx_pen" style="font-size: 18px;"></i></button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete zx_circle1" data-id=${item.id}><i
                            class="layui-icon layui-icon-delete zx_bin"></i></button>
                        </td>
                    </tr>
                `
            }).join(''))
            renderPage2(count)
        })
}

renderText()
renderImg()

// todo ================== 删除文章功能 =================================

$('#tbody_text').on('click', '.btn_delete', function () {
    const id = $(this).data('id')
    // 弹出确认框
    layer.confirm('是否确认要删除？', { icon: 3, title: '提示' }, function (index) {
        axios
            .get('/ydd_link/del', {
                params: {
                    id,
                    "x-token": data,
                }
            })
            .then(({ data: { errno } }) => {
                // 提示
                if (errno !== 0) return layer.msg('删除失败！')

                // ! 解决删除的bug
                //  当这一页只有一个删除按钮了，当进行删除的时候就会有bug
                //  思路：这一页就没有了，应该展示上一页的数据
                //  注意事项：当前页最小值是 1
                //  如何得知这一页只有一个删除按钮? ==> 获取删除按钮看个数

                if ($('.btn_delete').length === 1) linkObj_text.page = linkObj_text.page === 1 ? 1 : linkObj_text.page - 1


                layer.msg('删除成功')

                // 重新获取所有数据展示
                renderText()
            })
        layer.close(index);
    })
})

$('#tbody_img').on('click', '.btn_delete', function () {
    const id = $(this).data('id')
    // 弹出确认框
    layer.confirm('是否确认要删除？', { icon: 3, title: '提示' }, function (index) {
        axios
            .get('/ydd_link/del', {
                params: {
                    id,
                    "x-token": data,
                }
            })
            .then(({ data: { errno } }) => {
                // 提示
                if (errno !== 0) return layer.msg('删除失败！')

                // ! 解决删除的bug
                //  当这一页只有一个删除按钮了，当进行删除的时候就会有bug
                //  思路：这一页就没有了，应该展示上一页的数据
                //  注意事项：当前页最小值是 1
                //  如何得知这一页只有一个删除按钮? ==> 获取删除按钮看个数

                if ($('.btn_delete').length === 1) linkObj_img.page = linkObj_img.page === 1 ? 1 : linkObj_img.page - 1


                layer.msg('删除成功')

                // 重新获取所有数据展示
                renderImg()
            })
        layer.close(index);
    })
})

// todo ================== 添加按钮功能 =================================

// 添加表单的内容
const addFormStr = `
                <!-- 备用： 添加弹出层的表单内容结构 -->
                <form id="addForm" class="layui-form">
                <!-- 第一行 链接类型 -->
                <div class="layui-form-item" style="margin-top: 15px;">
                    <label class="layui-form-label"><strong>*</strong>链接类型</label>
                    <div class="layui-col-md4">
                    <select lay-filter="valType" name="type">
                        <option value="">请选择</option>
                        <option value="1">文字类型</option>
                        <option value="2">图片类型</option>
                    </select>
                    </div>
                </div>
                <!-- 第二行 标题名称  -->
                <div class="layui-form-item" style="display:none;" id="titleTxt">
                    <div class="layui-col-md11">
                    <label class="layui-form-label"><strong>*</strong>标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="请输入标题名称" autocomplete="off"
                        class="layui-input">
                    </div>
                    </div>
                </div>
                <!-- 第三行 链接地址  -->
                <div class="layui-form-item">
                    <div class="layui-col-md11">
                    <label class="layui-form-label"><strong>*</strong>链接地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" lay-verify="required" placeholder="请输入链接地址" autocomplete="off"
                        class="layui-input">
                    </div>
                    </div>
                </div>
                <!-- 第四行 链接描述 -->
                <div class="layui-form-item layui-form-text">
                    <div class="layui-col-md11">
                    <label class="layui-form-label"><strong>*</strong>链接描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入链接描述名称" name="des" class="layui-textarea"></textarea>
                    </div>
                    </div>
                </div>
                <!-- 第五行 链接图片 -->
                <div class="layui-form-item" style="display: none;" id="titleImg">

                <label class="layui-form-label"><strong>*</strong>链接图片</label>
                <div class="layui-input-block cropper-container">
                  <!-- 文件选择框 -->
                  <input class="layui-hide"  type="file" id="fileCover_add" accept="image/jpeg,image/png,image/gif,image/bmp" />
                  <div class="container">
                    <img id="zx_addImgSrc">
                  </div>
                  <div class="right-box">
                    <div class="preview"></div>
                    <button type="button" class="layui-btn layui-btn-danger" id="btnChooseCoverImage">选择封面</button>
                  </div>
                </div>

                </div>
                <!-- 第六行 按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
             </form>
    `

// todo ================== 新增文字链接 =================================

let indexAddForm
$('#btnAddCate').on('click', function () {
    // 弹出框
    indexAddForm = layer.open({
        title: '添加友情链接', // 标题
        type: 1, // 页面层
        area: ['550px', '550px'], // 定宽高
        content: addFormStr, // 内容
    })
    form.render()
})

layui.use(function () {
    form.render()
    // select 事件
    form.on('select(valType)', function (data) {
        const value = data.value; // 获得被选中的值
        if (value === '1') {
            $('#addForm #titleTxt').show()
            $('#addForm #titleImg').hide()

        } else if (value === "2") {
            $('#addForm #titleTxt').hide()
            $('#addForm #titleImg').show()
        } else {
            $('#addForm #titleTxt').hide()
            $('#addForm #titleImg').hide()
        }
    })
})

$('body').on('submit', '#addForm', function (e) {
    e.preventDefault()
    let data = $(this).serialize()
    const typeNum = eval(data.split('&')[0])
    if (typeNum === 1) {
        axios.post('/ydd_link/add', data)
            .then(({ data: { errno } }) => {
                if (errno !== 0) return layer.msg('添加失败')
                // 关闭弹出层
                layer.close(indexAddForm)
                // 重新渲染
                renderText()

                // 提示成功
                layer.msg('添加成功')
            })
    }
    if (typeNum === 2) {
        const imgSrc = $('#zx_addImgSrc').prop("src").split('8060/')[1]
        data = data + `&img=${imgSrc}`
        axios.post('/ydd_link/add', data)
            .then(() => {
                layer.msg('添加成功')
                layer.close(indexAddForm)
                renderText()
                renderImg()
            })

    }
})

// todo ================== 选择封面 =================================
// ! 点击按钮，触发文件选择框的点击事件
$('body').on('click', '#btnChooseCoverImage', function () {
    $('#fileCover_add').click()
})

$('body').on('change', '#fileCover_add', function () {
    const files = this.files[0]
    const fd = new FormData()
    fd.append('file', files)
    axios
        .post('/common/upload?type=images', fd)
        .then(({ data: { data: { savePath } } }) => {
            $('#zx_addImgSrc').prop("src", `http://124.223.14.236:8060/${savePath}`)
        })
})



// 编辑表单的内容
const editFormStr = `
        <!-- 备用： 编辑弹出层的表单内容结构 -->
        <form id="editForm" class="layui-form" lay-filter="edit-val-filter">
        <input name="id" style="display:none;">
        <!-- 第一行 链接类型 -->
        <div class="layui-form-item" style="margin-top: 15px;">
            <label class="layui-form-label"><strong>*</strong>链接类型</label>
            <div class="layui-col-md4">
            <select lay-filter="editType" name="type">
                <option value="1">文字类型</option>
                <option value="2">图片类型</option>
            </select>
            </div>
        </div>
        <!-- 第二行 标题名称  -->
        <div class="layui-form-item" id="editTxt" style="display:none;">
            <div class="layui-col-md11">
            <label class="layui-form-label"><strong>*</strong>标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="请输入标题名称" autocomplete="off"
                class="layui-input">
            </div>
            </div>
        </div>
        <!-- 第三行 链接地址  -->
        <div class="layui-form-item">
            <div class="layui-col-md11">
            <label class="layui-form-label"><strong>*</strong>链接地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" lay-verify="required" placeholder="请输入链接地址" autocomplete="off"
                class="layui-input">
            </div>
            </div>
        </div>
        <!-- 第四行 链接描述 -->
        <div class="layui-form-item layui-form-text">
            <div class="layui-col-md11">
            <label class="layui-form-label"><strong>*</strong>链接描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入链接描述名称" name="des" class="layui-textarea"></textarea>
            </div>
            </div>
        </div>
        <!-- 第五行 链接图片 -->
        <div class="layui-form-item" style="display: none;" id="editImg">

        <label class="layui-form-label"><strong>*</strong>链接图片</label>
        <div class="layui-input-block cropper-container">
        <!-- 文件选择框 -->
        <input class="layui-hide" type="file" id="fileCover_edit" accept="image/jpeg,image/png,image/gif,image/bmp" />
        <div class="container">
            <img id="zx_editImgSrc">
        </div>
        <div class="right-box">
            <div class="preview"></div>
            <button type="button" class="layui-btn layui-btn-danger" id="btnChooseEditImage">选择封面</button>
        </div>
        </div>

        </div>
        <!-- 第六行 按钮 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        </form>
    `

// todo ================== 编辑文字链接 =================================
let indexEditForm
$('body').on('click', '.btn_edit', function () {
    // 编辑弹出框
    indexEditForm = layer.open({
        title: '编辑文章类别', // 标题
        type: 1, // 页面层
        area: ['550px', '500px'], // 定宽高
        content: editFormStr, // 内容
    })
    form.render()

    const id = $(this).data('id')
    axios.get(`/ydd_link/rowInfo?id=${id}`)
        .then(({ data: { data } }) => {
            form.val('edit-val-filter', data)
            if (data.type === '1') {
                $('#editForm #editTxt').show()
                $('#editForm #editImg').hide()

            } else if (data.type === "2") {
                $('#editForm #editTxt').hide()
                $('#editForm #editImg').show()
                $('#zx_editImgSrc').prop('src', `http://124.223.14.236:8060/${data.img}`)
            } else {
                $('#editForm #editTxt').hide()
                $('#editForm #editImg').hide()
            }

        })
})

$('body').on('submit', '#editForm', function (e) {
    e.preventDefault()
    const fd = new FormData(this)
    const imgSrc = $('#zx_editImgSrc').prop("src").split('8060/')[1]
    if (imgSrc) {
        fd.append('img', imgSrc)
    } else {
        fd.append('img', "")
    }

    axios.post('/ydd_link/update', fd)
        .then(() => {
            layer.msg('修改成功')
            layer.close(indexEditForm)
            renderText()
            renderImg()
        })
})

layui.use(function () {
    // select 事件
    form.on('select(editType)', function (data) {
        form.render()
        const value = data.value; // 获得被选中的值
        if (value === '1') {
            $('#editForm #editTxt').show()
            $('#editForm #editImg').hide()

        } else if (value === "2") {
            $('#editForm #editTxt').hide()
            $('#editForm #editImg').show()
        } else {
            $('#editForm #editTxt').hide()
            $('#editForm #editImg').hide()
        }
    })
})

// todo ================== 选择封面 =================================
// ! 点击按钮，触发文件选择框的点击事件
$('body').on('click', '#btnChooseEditImage', function () {
    $('#fileCover_edit').click()
})

$('body').on('change', '#fileCover_edit', function () {
    const files = this.files[0]
    const fd = new FormData()
    fd.append('file', files)
    axios
        .post('/common/upload?type=images', fd)
        .then(({ data: { data: { savePath } } }) => {
            $('#zx_editImgSrc').prop("src", `http://124.223.14.236:8060/${savePath}`)
        })
})

